<template>
  <el-upload
    action="#"
    :file-list="fileList"
    list-type="picture-card"
    :class="{disable:fileList.length >=limit}"
    :before-upload="beforeUpload"
    :http-request="upload"
    :on-remove="onRemove"
    :on-change="onChange"
  >
    <i class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDc4LVjz1uhSIzfPG2e4HCD82lEbv30mLq',
  SecretKey: 'c6mO5bzKbw8WzW0JQNPI8tfKo381tdGs'
})

export default {
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 图片校验
    beforeUpload(file) {
      // 判断大小
      if (file.size > 1024 * 1024) {
        console.log('大小不能超过1M')
        return false
      }
      // 判断类型
      if (!file.type === 'image/jpeg' && file.type === 'image/png') {
        console.log('目前只支持jpeg/png图片')
        return false
      }
    },
    // 图片删除
    onRemove(file, newfileList) {
      this.fileList = newfileList
    },
    // 图片更换
    onChange(file, newFileList) {
      this.fileList = newFileList
    },
    // 自定义上传，替换action
    upload(params) {
      const file = params.file
      // console.log('自定义上传函数', file)

      cos.putObject({
        Bucket: 'hr83-1315102076', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-nanjing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        // 用当前时间戳做文件名, 强制转成字符串
        Key: Date.now() + '', /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
      }, (err, data) => {
        console.log('异步上传完毕, 传入 err / data, 如果err错误不存在就证明上传成功')
        console.log(err || data)
        if (!err) {
          // 如果没有报错, 就得到了在线图片地址
          console.log('http://' + data.Location)
          // 所有的结果数据存放到 fileList 打通腾讯云和element ui数据
          // this.fileList[0].status = 'success'
          // this.fileList[0].url = 'http://' + data.Location
          // 上传多张图片不能直接改 this.fileList[0]
          // console.log('正在上传', file)
          // console.log('文件列表', this.fileList)
          this.fileList.forEach(item => {
            // element自带uid属性，比较正在上传的UID和fileList的UID，修改对应UID的地址
            if (item.uid === file.uid) {
              item.status = 'success'
              item.url = 'http://' + data.Location
            }
          })
        }
      })
    }

  }
}
</script>

<style lang="scss"  scoped>
.disable {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
